<!--
 * @Author: Wangtao
 * @Date: 2022-08-26 10:39:29
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-08-30 14:56:57
-->
<template>
  <div class="box">
    <div class="box-left">
      <slot name="list"></slot>
    </div>
    <div class="box-right">
      <slot name="main"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'recentCallsUi',
  components: {},
  // ----------------生命周期-----------------------
  setup () {
    // ----------------传入属性-----------------------
    // ----------------内部属性-----------------------
    // ----------------计算属性-----------------------
    // ----------------监听方法-----------------------
    // ----------------调用方法-----------------------
    return {}
  }

})
</script>
<style lang="stylus" scoped>
.box
  width 100%
  height 100%
  // display flex
  // flex-direction row
  .box-left
    width 280px
    height calc(100% - 60px)
    display flex
    flex-direction column
    background red
    position absolute
    top 0
    bottom 0
    left 0
    margin-top 60px
  .box-right
    height 100%
    background #FFF
    position relative
    margin-left 280px
    width calc(100% - 280px)
</style>